<template>
  <view class="wallet">
    <HeadNav page-name="钱包" :borderType="true" :showNav="true" />
    <view class="flex-col container">
      <view class="flex-col group_4">
        <view class="section_2"> </view>
        <view class="section_3">
          <view class="group_5">
            <div class="text_4">当前余额(元)</div>
            <div class="text_6">{{(getMoney.balance || 0) | rounding}}</div>
            <!-- <div class="text_5" @click="navigateTo({url: '/pagesA/wallet/topUp'})">充值 ></div> -->
          </view>
          <div class="wallet_detail">
            <text class="text_7" @click="navigateTo({url: '/pagesA/wallet/detail'})" hover-class='hover'>明细</text>
            <view class="section_4"> </view>
            <text class="text_7" @click="navigateTo({url: '/pagesA/wallet/withdrawal'})" hover-class='hover'>提现</text>
          </div>
        </view>
        <view class="flex-col section_5">
          <!-- <view class="top-section justify-between" @click.stop="settlementNum">
            <view class="left-group flex-row">
              <text>待结算金额</text>
              <u-icon class="icon_box" @tap.stop="tipsMarkFn(1)" name="question-circle" color="#969799" size="34"></u-icon>
            </view>
            <view class="right-group flex-row">
              <text>￥{{getMoney.unsettledProfitMoney | rounding}}</text>
              <image
                src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
                class="image_8_box"
              />
            </view>
          </view> -->
          <view class="top-section justify-between" @click.stop="withdrawalRecordFn(1,getMoney.amountInWithdrawal)">
            <view class="left-group flex-row">
              <text>提现中金额</text>
            </view>
            <view class="right-group flex-row">
              <text>￥{{getMoney.amountInWithdrawal | rounding}}</text>
              <image
                src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
                class="image_8_box"
              />
              <!-- <u-icon name="arrow-right" color="#969799" size="32"></u-icon> -->
            </view>
          </view>
          <view class="top-section justify-between" @click.stop="withdrawalRecordFn(2,getMoney.withdrawalAmount)">
            <view class="left-group flex-row group_6">
              <text>已提现金额</text>
            </view>
            <view class="flex-row group_7">
              <text>￥{{getMoney.withdrawalAmount | rounding}}</text>
              <image
                src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
                class="image_8_box"
              />
            </view>
          </view>
          <view class="justify-between section_7" @click.stop="withdrawalRecordFn">
            <view class="left-group flex-row group_8">
              <text>提现记录</text>
            </view>
            <view class="flex-row group_9">
              <text>历史提现记录</text>
              <image
                src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
                class="image_8_box image_15"
              />
            </view>
          </view>
        </view>
      </view>
      <view class="rules_text_box"><view class="text_box" hover-class="hover" @click.stop="goToRulesFn">规则说明</view></view>
    </view>
    <div class="fixed_box" v-if="tipsType" @click.stop="tipsType = false">
      <div class="publicPopup_box" @click.stop="">
        <div class="public_msg_box">
          <div class="public_titName_box">{{tipsData.title}}</div>
          <div class="public_text_box">{{tipsData.text}}</div>
          <button class="iKnow_btn" hover-class='hover' @click.stop="tipsType = false">我知道了</button>
        </div>
      </div>
    </div>
  </view>
</template>
<script>
import HeadNav from "@/components/headNav/index.vue";
import Money from '@/api/money.js'
export default {
  name: "wallet",
  components: {
    HeadNav
  },
  data() {
    return {
      getMoney: {
        balance: 0
      },
      tipsType: false,
      tipsData: {
        title: '',
        text: ''
      }
    }
  },
  onLoad () {
  },
  onShow () {
    this.getMoneyInfo()
  },
  methods: {
    tipsMarkFn (type) {
      this.tipsData ={}
      if (type==1) {
        this.tipsData = {
          title: '待结算金额',
          text: '待结算(还可以进行售后)的订单收益之和已付款订单还未过售后处理期的收益'
        }
      }
      if (type==2) {
        this.tipsData = {
          title: '提现中金额',
          text: '已发起提现，但尚未到账正在处理中的金额'
        }
      }
      if (type==3) {
        this.tipsData = {
          title: '已提现金额',
          text: '已成功提现到银行卡或微信钱包的总金额'
        }
      }
      if (type==4) {
        this.tipsData = {
          title: '提现记录',
          text: '查看所有提现成功或提现失败的历史记录'
        }
      }
      this.tipsType = true
    },
    async getMoneyInfo() {
      Money.getMoneyInfo().then(res => {
        console.log(res, '钱包首页');
        if (res.code === 200) {
          if (res.data !== {}) {
            this.getMoney = res.data
          }
        }
      })
    },
    settlementNum () {
      this.navigateTo({ url: '/pagesA/wallet/staySettlement' })
    },
    detailNum () {
      this.navigateTo({url: '/pagesA/wallet/withdrawaling'})
    },
    withdrawalNum () {
      this.navigateTo({url: '/pagesA/wallet/withdrawalNum'})
    },
    withdrawalRecordFn (type,mun) {
      this.navigateTo({url: `/pagesA/wallet/withdrawalRecord?type=${type}&totalAmount=${mun}`})
    },
    goToRulesFn () {
      this.navigateTo({url: '/pagesA/wallet/ruleDescription'})
    }
  },
  filters: {
    // 只显示到两位小数点
    rounding (value) {
      return value>0?value.toFixed(2):0.00
    },
  }
};
</script>
<style lang="scss" scoped>
.wallet {
  min-height: 100vh;
  background-color: #f2f3f5;
}
.top-section {
  padding: 24rpx 32rpx;
  background-color: rgb(255, 255, 255);
  box-shadow: inset 0px -2rpx 0px 0px rgb(238, 238, 238);
  position: relative;
}
.image_6 {
  margin: 5rpx 0;
  width: 30rpx;
  height: 30rpx;
}
.image_8_box {
  margin: 4rpx 0 8rpx 7rpx;
  width: 32rpx;
  height: 32rpx;
}
.left-group {
  color: rgb(50, 50, 51);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
  display: flex;
  align-items: center;
  .icon_box {
    margin-left: 12rpx;
  }
}
.right-group {
  margin-right: 5rpx;
  color: rgb(150, 151, 153);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.container {
  background-color: #f2f3f5;
  width: 100vw;
//   height: 100vh;
//   overflow-y: auto;
}
.group_4 {
  padding: 31rpx 32rpx 0;
  flex: 1 1 auto;
  overflow-y: auto;
}
.section_2 {
  margin-left: 14rpx;
  background-image: linear-gradient(
    90.2deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) -17.08%,
    rgb(255, 255, 255) 46.41%,
    rgba(255, 255, 255, 0) 94.72%,
    rgba(255, 255, 255, 0) 100%
  );
  width: 330rpx;
  height: 2rpx;
}
.section_3 {
  background-image: linear-gradient(
    113.2deg,
    rgb(243, 121, 101) 0%,
    rgb(243, 121, 101) -6.37%,
    rgb(228, 68, 53) 117.97%,
    rgb(228, 68, 53) 100%
  );
  color: #fff;
  box-shadow: 0px 4rpx 16rpx 0px rgba(228, 68, 53, 0.2);
  border-radius: 16rpx;
  padding: 38rpx 0;
}
.section_5 {
  margin-top: 32rpx;
  overflow: hidden;
  border-radius: 16rpx;
  background-color: rgb(255, 255, 255);
//   height: 264rpx;
}
.section_7 {
  padding: 24rpx 32rpx;
  overflow: hidden;
  border-radius: 16rpx;
  background-color: rgb(255, 255, 255);
  box-shadow: inset 0px -2rpx 0px 0px rgb(238, 238, 238);
  height: 88rpx;
}
.group_5 {
  width: 100%;
  font-size: 28rpx;
  text-align: center;
}

.text_5 {
  margin-bottom: 19rpx;
}
.text_7 {
  color: rgb(255, 255, 255);
  font-size: 36rpx;
  font-weight: 500;
  line-height: 50rpx;
  white-space: nowrap;
}
.section_6 {
  padding: 24rpx 32rpx;
  background-color: rgb(255, 255, 255);
  box-shadow: inset 0px -2rpx 0px 0px rgb(238, 238, 238);
}
.group_8 {
  color: rgb(50, 50, 51);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.group_9 {
  margin-right: 5rpx;
  color: rgb(150, 151, 153);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.text_6 {
  font-size: 96rpx;
  font-weight: bolder;
}
.wallet_detail {
  position: relative;
  display: flex;
  justify-content: space-around;
}
.section_4 {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 49.39%,
    rgba(255, 255, 255, 0) 100%,
    rgba(255, 255, 255, 0) 100%
  );
  width: 2rpx;
  height: 60rpx;
  position: absolute;
  left: 345rpx;
  top: 0;
}
.group_6 {
  color: rgb(50, 50, 51);
  font-size: 28rpx;
  white-space: nowrap;
  align-items: center;
}
.group_7 {
  margin-right: 5rpx;
  color: rgb(150, 151, 153);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.image_15 {
  margin: 4rpx 0 8rpx 4rpx;
}
.fixed_box {
  .publicPopup_box {
    .public_msg_box {
      .public_text_box {
        margin-bottom: 40rpx;
      }
    }
  }
}
.rules_text_box {
  margin-top: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .text_box {
    font-size: 24rpx;
    line-height: 32rpx;
    color: #969799;
  }
}
</style>
